<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }

      .item {
        width: 100%;
        height: 100%;
        background-color: #000;
      }
      .item .ani-page {
        width: 100%;
        height: 700px;
        line-height: 700px;
        color: #fff;
        text-align: center;
        font-size: 60px;
        position: sticky;
        top: 0;
      }
      .item .content {
        width: 100%;
        height: 10000px;
      }
      .blue {
        background-color: blue;
      }
      .green {
        background-color: green;
      }

      .loading {
        width: 300px;
        text-align: center;
        position: absolute;
        top: 45%;
        left: 50%;
        margin-left: -150px;
        height: 5px;
        border: solid 1px #ccc;
        border-radius: 5px;
      }
      .loading-wrapper {
        width: 100%;
        /* position: relative; */
      }
      .loading-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 5px;
        z-index: 10;
        background-color: blue;
        border-radius: 5px;
      }
      .loading-status {
        font-size: 20px;
        font-weight: 200;
        margin-top: -30px;
        color: #666;
      }
      .hide {
        display: none;
      }

      .content2 {
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <!-- <h1 class="loading hide">
      <p class="loading-status">0%</p>
      <p class="loading-bar"></p>
    </h1> -->
    <div class="container">
      <!-- 其他页面 -->
      <section class="item">
        <div class="ani-page">
          <h1>用鼠标往下滚动</h1>
        </div>
        <div class="content2"></div>
      </section>

      <section class="item">
        <div class="ani-page">
          <h1>对，接着滚动</h1>
        </div>
        <div class="content2"></div>
      </section>

      <!-- 有动画页面 -->

      <section class="item">
        <div class="ani-page">
          <canvas class="canvas"></canvas>
        </div>
        <div class="content"></div>
      </section>

      <!-- 其他页面 -->
      <section class="item">
        <div class="ani-page">
          <h1>其他页面</h1>
        </div>
        <div class="content2"></div>
      </section>

      <!-- 有动画页面 -->
      <section class="item">
        <div class="ani-page">
          <canvas class="canvas2"></canvas>
        </div>
        <div class="content"></div>
      </section>

      <section class="item">
        <div class="ani-page">
          <h1>谢谢</h1>
        </div>
        <div class="content2"></div>
      </section>
    </div>

    <script>
      const baseurl = `https://dji-official-fe.djicdn.com/assets/uploads/p/980e82a1-dc9e-4518-84b3-1f28a2a2eb2f/drones-pc/`;

      // 保存图片数组
      const images = [];
      const maxlength = 240; //240
      // let pageHeight = 10000;

      const winWidth = window.innerWidth;
      const winHeight = window.innerHeight;
      let pageHeight = document.querySelector(".container").offsetHeight;

      // 设置动画页面高度为窗口高度
      const aniPages = document.querySelectorAll(".ani-page");
      for (var page of aniPages) {
        page.style.height = winHeight + "px";
      }

      // 第一个画布
      const canvas = document.querySelector(".canvas");
      canvas.width = winWidth;
      canvas.height = winHeight;
      const ctx = canvas.getContext("2d");

      // 加载进度条
      let loading = false;
      const loadingCom = document.querySelector(".loading");
      const loadingLength = 300;
      const loadingStatus = document.querySelector(".loading-status");
      const loadingBar = document.querySelector(".loading-bar");

      function showLoading(loading) {
        if (loading) {
          loadingCom.classList.remove("hide");
        } else {
          loadingCom.classList.add("hide");
        }
      }

      function updateLoading(cur, total) {
        let width = (cur / total) * 300;
        document.querySelector(".loading-bar").style.width = width + "px";
        document.querySelector(".loading-status").innerHTML =
          ((cur / total) * 100).toFixed(2) + "%";
      }

      // 预加载图片
      function loadImage(baseurl, suffix, maxlength, images, success) {
        let imageIndex = 0;
        function nextImage() {
          let image = new Image();
          image.src = baseurl + imageIndex + suffix;
          image.onload = function () {
            images.push(image);
            imageIndex++;
            if (imageIndex < maxlength) {
              nextImage();
            } else {
              success();
            }
          };
        }
        nextImage();
      }

      function drawImageByScroll(top, ctx, images, pageHeight) {
        let curIndex = Math.floor((top / pageHeight) * maxlength);
        ctx.clearRect(0, 0, winWidth, winHeight);
        ctx.drawImage(images[curIndex], 0, 0, winWidth, winHeight);
      }

      function bindEvent(ctx, images, pageHeight) {
        window.addEventListener("scroll", function (e) {
          let top;
          if (document.body && document.body.scrollTop) {
            top = document.body.scrollTop;
          }

          if (document.documentElement && document.documentElement.scrollTop) {
            top = document.documentElement.scrollTop;
          }
          if (top < pageHeight) {
            drawImageByScroll(top, ctx, images, pageHeight);
          }
        });
      }

      loadImage(baseurl, ".jpg", 240, images, function () {
        drawImageByScroll(0, ctx, images, pageHeight);
        bindEvent(ctx, images, pageHeight);
      });

      let baseurl2 = `https://dji-official-fe.djicdn.com/assets/uploads/p/68417e53-7aad-45e6-8a1a-ce67e2a54ff3/goggles-pc/`;
      let suffix2 = ".webp";
      let total = 235;
      let images2 = [];
      const canvas2 = document.querySelector(".canvas2");
      canvas2.width = winWidth;
      canvas2.height = winHeight;
      const ctx2 = canvas2.getContext("2d");

      loadImage(baseurl2, suffix2, total, images2, function () {
        drawImageByScroll(0, ctx2, images2, pageHeight);
        bindEvent(ctx2, images2, pageHeight);
      });
    </script>
  </body>
</html>
